<!-- 
    jsmpeg + ffmpeg + rtsp2web
    http://192.168.20.149:5175/jsmpeg?rtspUrl=rtsp://admin:hk12345678@198.168.10.220:554/Streaming/Channels/101
 -->
<template>
  <div>
    <!-- 添加Canvas和图片元素 -->
    <canvas id="videoCanvas" style="display:none;"></canvas>
    <img src="/src/assets/error.gif" alt="" style="display:block;" id="imageCanvas">
  </div>
</template>

<script>

export default {
  mounted() {
    // 获取URL参数并解码RTSP URL
    const urlParams = new URLSearchParams(window.location.search)
    const rtsp = decodeURIComponent(urlParams.get('rtspUrl'))

    // 创建JSMpeg播放器实例
    new JSMpeg.Player(`ws://198.168.20.99:10012/rtsp?url=${btoa(rtsp)}`, {
      canvas: document.getElementById('videoCanvas'),
      loop:true,
      autoplay:true,
      audio:false,
      video:true,
      poster:"/src/assets/error.gif",
      //  disable WebGL and always use the Canvas2D renderer
      disableGl:true,
      disableWebAssembly:true,
      pauseWhenHidden:true,
      // 捕获截图或生成缩略图
      preserveDrawingBuffer:false,
      // playback can begin before 
      progressive:true,
      videoBufferSize:256*1024,
      audioBufferSize:128*1024,
      onPlay: () => {
        // 视频播放成功
        console.log('play success')
        document.getElementById('videoCanvas').style.display = 'block'
        document.getElementById('imageCanvas').style.display = 'none'
      },
      onPause: () => {
        // 视频暂停或失败
        console.log('play pause or error')
        document.getElementById('videoCanvas').style.display = 'none'
        document.getElementById('imageCanvas').style.display = 'block'
      },
      onEnded: () => {
        // 视频播放结束
        console.log('play end')
        document.getElementById('videoCanvas').style.display = 'none'
        document.getElementById('imageCanvas').style.display = 'block'
      }
    })
  }
}
</script>
<!-- 添加必要的CSS样式 -->
<style scoped>
canvas,
img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>